<template>
    <div class="fillcontain">
        <head-top></head-top>
        <header class="admin_title">管理员信息</header>
        <div class="admin_set">
            <ul>
                <li>
                    <span>姓名：</span><span>{{userInfo.username}}</span>
                </li>
                <li>
                    <span>注册时间：</span><span>{{userInfo.create_time}}</span>
                </li>
                <li>
                    <span>昵称：</span><span>{{userInfo.nickname}}</span>
                </li>
                <li>
                    <span>管理员 ID：</span><span>{{userInfo.id}}</span>
                </li>
                <li>
                    <span>密码：</span><span><el-input @blur="changePassword" class="myInput" v-model="userInfo.password"></el-input></span>
                </li>
             
            </ul>
        </div>
    </div>
</template>

<script>
	import headTop from '../components/headTop'
    import {mapState} from 'vuex'
    import {baseUrl, baseImgPath} from '@/config/env'
    import {updatepwd} from "@/api/getData";

    export default {
        data(){
            return {
                baseUrl,
                baseImgPath,
                userInfo:{},
            }
        },
    	components: {
    		headTop,
    	},
        computed: {
            ...mapState(['adminInfo']),
        },
        mounted(){
            this.userInfo=JSON.parse(localStorage.getItem('userInfo'))
            this.userInfo.create_time=this.userInfo.create_time.substring(0,10)
            console.log( this.userInfo);
         
        },
        methods: {
            uploadImg(res, file) {
                if (res.status == 1) {
                    this.adminInfo.avatar = res.image_path;
                }else{
                    this.$message.error('上传图片失败！');
                }
            },
            beforeImgUpload(file) {
                const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isRightType) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isRightType && isLt2M;
            },
           async changePassword(){
                //   let { type, username, oldpwd, newpwd } = req.body
                let params=new URLSearchParams()
                params.append('type','teacher')
                params.append('username',this.userInfo.username)
                params.append('newpwd',this.userInfo.password)
                let res=await updatepwd(params)
                if(res.data.code==200){
                     this.$message({
                type: "success",
                message: res.data.msg,
              });
               this.$router.push("/");
                }else{
                     this.$message({
                type: "error",
                message: res.data.msg,
              });
                }
            }
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .myInput{
        display: inline-block;
        width: 300px;
        input{
            border: none;
            // background: none;
        }
    }
	.explain_text{
		margin-top: 20px;
		text-align: center;
		font-size: 20px;
		color: #333;
	}
    .admin_set{
        width: 60%;
        background-color: #F9FAFC;
        min-height: 400px;
        margin: 20px auto 0;
        border-radius: 10px;
        ul > li{
            padding: 20px;
            span{
                color: #666;
            }
        }
    }
    .admin_title{
        margin-top: 20px;
        .sc(24px, #666);
        text-align: center;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        margin-top: 10px;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
